<template>
	<view class="container">
		<view v-if="!goodsDetail.goods_id"
			style="width: 750rpx; height: 80vh; display: flex;justify-content: center;align-items: center;">
			<u-loading size="40" color="#00632B" mode="circle" :show="showLoading"></u-loading>
		</view>
		<view v-else>
			<view class="goods_img" style="width: 750rpx;">
				<u-image :height="750" mode="aspectFit" @tap="previewImage(goodsDetail.image)" border-radius="0rpx"
					lazy-load :src="goodsDetail.image" />
			</view>
			<view class="content_box goods refund-info" style="padding: 50rpx 20rpx;">
				<view class="flex" style="justify-content: space-between; align-items: flex-start; ">
					<view class="goods-info">
						<view class="line-2" style="font-size: large; display: flex; font-weight: bold;">
							<router-link
								:to="{path:'/pages/goods_details/goods_details',query:{id:goodsDetail.goods_id}}">
								{{goodsDetail.goods_name.length > 25 ? goodsDetail.goods_name.slice(0, 25) :  goodsDetail.goods_name }}
							</router-link>
						</view>
						<view class="xxs muted m-t-14">货号：{{goodsDetail.bar_code}}， 规格：{{goodsDetail.spec_value}}</view>
					</view>
					<view v-if="service_type == 2">
						<view
							style="display: flex;  align-items: baseline; flex-direction: row; color: #00642B;flex: 1;">
							<view v-if="goodsDetail.predict_recycle_price">
								<view style="display: flex;flex-direction: row; align-items: baseline;color: #00642B;" class="xxs">￥
									<view style="font-size: large;color: #00642B;">{{goodsDetail.predict_recycle_price}}</view>
								</view>
							</view>
							<view v-else>
								<view style="display: flex; align-items: baseline; flex-direction: row;">
									<view class="xxs" style="color: #00642B;">￥</view>
									<view style="font-size: large;">100</view>
									<view class="xxs" style="color: #00642B;">~￥</view>
									<view style="font-size: large;">200</view>
								</view>
							</view>
						</view>
						<view class="xxs muted m-t-14" style="padding-left: 10rpx;">预估价</view>
					</view>
				</view>
			</view>
			<view class="opt-box">
				<view class="address_info">
					<view class="content_box refund-info flex ">
						<view class="label">邮寄地址：</view>
						<view class="label_content flex" style=" justify-content: space-between;">
							<view class="flex-col" style="width: 447rpx; margin-right: 10rpx; line-height: 50rpx; color: #9A98A5;">
								<u-collapse :headStyle="{color:'#9A98A5'}" :bodyStyle="{color:'#9A98A5'}">
									<u-collapse-item   :title="item.head" v-for="(item, index) in refund_address_arr" :key="index">
										{{item.body}}
									</u-collapse-item>
								</u-collapse>
							</view>
							<view style="width: 100rpx;"><button class="xxs copy-btn br60  flex-2"
									style="background-color: #efefef; color: #9A98A5;" type="primary"
									@tap="onCopy">复制</button></view>
						</view>
					</view>
					<view v-if="service_type == 1" class="content_box refund-info flex">
						<view class="label">我的地址：</view>
						<view class="flex">
							<view class="label_content">
								<navigator hover-class="none" url="/bundle/pages/user_address/user_address?type=1">
									<view class="address flex bg-white color-muted"
										style="justify-content: space-between; width: 540rpx;">
										<view class="flex-1 m-r-20">
											<view v-if="!myAddress.contact" style="color:#EFEFEF; ">设置收货地址</view>
											<view v-else>
												<view class="area m-t-10 m-b-10">
													{{myAddress.address_all.length > 17 ? myAddress.address_all.slice(0, 17) + '...' :  myAddress.address_all}}
												</view>
												<!-- <text class="name md m-r-10">{{myAddress.contact}}</text>
												<text class="phone md">{{myAddress.telephone}}</text> -->
											</view>
										</view>
										<view><u-icon name="arrow-right"></u-icon></view>
									</view>
								</navigator>
							</view>
						</view>
					</view>
					<view v-if="service_type == 2" class="content_box refund-info flex">
						<view class="label">收款账号：</view>
						<view class="flex label_content">
							<navigator hover-class="none"
								:url="'/bundle/pages/user_pay/user_pay?type=3&service_type=2&item_id=' + goodsDetail.item_id">
								<view class="address flex bg-white" style="width: 576rpx">
									<view class="flex-1 m-r-20">
										<view v-if="!myPayAccount.account" style="color: #EFEFEF;">设置收款账号</view>
										<view v-else-if="myPayAccount.account_type == 3">
											<view style="display: flex; flex-direction: row;" class="color-muted">
												<view
													style="display: flex; flex-direction: column; justify-content: center;">
													<text class="md m-r-10">微信账号：{{myPayAccount.account}}</text>
													<!-- <text
														class="md m-r-10 m-t-10">收款姓名：{{myPayAccount.real_name}}</text>
													<view v-if="myPayAccount.money_qr_code" class="m-t-10"
														style="display: flex; justify-content: flex-start;">
														收款码：
														<image style="width: 50rpx; height: 50rpx;"
															:src="myPayAccount.money_qr_code"></image>
													</view> -->
												</view>
											</view>
										</view>
										<view v-else-if="myPayAccount.account_type == 4">
											<view class="color-muted"
												style="display: flex; flex: 1; flex-direction: row; justify-content: space-between;">
												<view style="display: flex; flex-direction: column;">
													<text class="md m-r-10">支付宝账号：{{myPayAccount.account}}</text>
													<!-- <text
														class="md m-r-10 m-t-10">收款姓名：{{myPayAccount.real_name}}</text>
													<view v-if="myPayAccount.money_qr_code" class="m-t-10"
														style="display: flex; justify-content: flex-start;">
														收款码：
														<image style="width: 50rpx; height: 50rpx;"
															:src="myPayAccount.money_qr_code"></image>
													</view> -->
												</view>
												<u-icon name="arrow-right"></u-icon>
											</view>
										</view>
									</view>
								</view>
							</navigator>
						</view>
					</view>
					<!-- <view class="refund-info flex col-top"> -->
					<!-- <view class="label">备注说明：</view>
						<view class="flex-1" style="background-color: #F8F8F8;">
							<u-input v-model="remark" type="textarea" placeholder="请描述申请售后的具体原因，100字以内" :border="false"
								:height="160" />
						</view> -->
					<!-- </view> -->
					<view class="content_box  flex upload">
						<view class="label">上传凭证：</view>
						<!-- <view class="title flex">
							<view>上传凭证：</view>
							<view class="muted">（选填，最多可上传1张）</view>
						</view> -->
						<view class="flex label_content" style="margin-top: 10rpx;">
							<u-upload ref="uUpload" :show-progress="false" :header="{token: $store.getters.token}"
								:max-count="1" width="80" height="80" :action="action" upload-text=" "
								@on-success="onSuccess" @on-remove="onRemove" />
						</view>
					</view>
					<view class="flex" style="margin-bottom: 40rpx;">
					</view>
				</view>
			</view>
		</view>

		<view class="fixed-bottom-button">
			<view style="display: flex; flex-direction: row; justify-content: flex-start;align-items: center;">
				<u-checkbox labelSize="24" v-model="isAgreement" shape="square">
					<text class="xs">我已阅读并同意</text>
				</u-checkbox>
				<text class="xs" @click="popAgreement(service_type)" style="font-weight: bold; text-decoration: underline; cursor: pointer;">《服务协议》</text>
			</view>
		</view>
		<view style="width: 750rpx; display: flex; justify-content: center; ">
			<view style="width: 600rpx;">
			<button class="br60" style="margin: 20rpx 26rpx 30rpx 26rpx;" type="primary" size="lg"
				@tap="onSubmit">确认</button>
				</view>
		</view>

		<shop-arc-mask :aid="arcAid" :goodsDetail="goodsDetail" :service_type="service_type" :showmask="showArc"
			@hidePopMask="hidePopMask"></shop-arc-mask>

		<u-select v-model="showPop" mode="single-column" value-name="index" label-name="name" :list="confirmReason"
			@confirm="confirmSelect"></u-select>
	</view>

</template>

<script>
	import {
		mapGetters,
	} from 'vuex'
	import {
		refundOptType
	} from "@/utils/type";
	import {
		baseURL
	} from '@/config/app';

	import {
		postGoodsService
	} from '@/api/store.js';

	import {
		getMyOrderGoodsDetail,
		// getGoodsInfo,
		// applyAfterSale,
		getDefaultAddress,
		applyAgain,
		getlastmethod,
		getuserpay
	} from "@/api/user";
	import {
		uploadFile,
		trottle,
		copy
	} from '@/utils/tools.js';

	export default {
		data() {
			return {
				showArc: false,
				arcAid: 0,
				isAgreement: 0,
				action: baseURL + '/api/file/formimage',
				hiddenOpt: false,
				optTyle: refundOptType.ONLY_REFUND,
				goods: {},
				reason: [],
				refundReason: [],
				confirmReason: [],
				showPop: false,
				reasonString: '',
				reasonId: 0,
				fileList: [],
				remark: "",
				service_type: 0,
				goodsDetail: {
					type: Object,
					defaults: {
						item_id: 0,
						goods_id: 0,
						goods_name: '',
						bar_code: '',
						spec_value: '',
						predict_recycle_price: '',
					}
				},
				refund_address: {
					type: Object,
					defaults: {}
				},
				refund_address_arr:[],
				myAddress: {},
				addressId: '',
				myPayAccount: {},
				user_pay_id: 0
			};
		},
		onUnload() {
			uni.$off("selectaddress")
			uni.$off("selectuserpay")
		},
		onLoad(options) {
			uni.$on("selectaddress", (e) => {
				this.addressId = e.item.id;
				this.myAddress = e.item;
				if (e.item) {
					this.myAddress.address_all = this.myAddress.province + this.myAddress.district + this.myAddress
						.city + this.myAddress.address;
				}
			})
			uni.$on("selectuserpay", (e) => {
				this.user_pay_id = e.item.id;
				this.myPayAccount = e.item;
			})

			const {
				service_type,
				item_id
			} = this.$Route.query
			//service_type 1:清洗服务;2羽绒回收
			this.service_type = service_type;
			let newTitle = '提交服务申请';
			if (service_type == 1) {
				newTitle = '提交清洗服务申请';
			} else {
				newTitle = '提交羽绒回收申请';
			}
			uni.setNavigationBarTitle({
				title: newTitle
			});
			this.itemId = item_id;
			this.getGoodsDetailFun();
			this.getDefaultAddressFun();
			this.onSubmit = trottle(this.onSubmit, 1000, this)
			this.getLast();
		},

		computed: {
			...mapGetters(['showLoading']),
		},
		methods: {
			popAgreement(service_type) {
				if (service_type == 1) {
					this.arcAid = 110; //弹出的文档ID
				} else if (service_type == 2) {
					this.arcAid = 120; //弹出的文档ID
				}
				// this.goodsDetail = goodsDetail;
				this.showArc = true;
				this.service_type = service_type; //1:清洗服务;2羽绒回收
			},
			hidePopMask() {
				this.showArc = false;
			},
			previewImage(current) {
				uni.previewImage({
					current,
					urls: [current] // 需要预览的图片http链接列表
				});
			},
			getLast() {
				getuserpay().then(res => {
					if (res.code == 1) {
						this.myPayAccount = res.data;
					}
				});
			},
			onCopy() {
				const {
					address,
					contact,
					mobile
				} = this.refund_address;
				copy(`${address},${contact},${mobile}`)
			},
			async getDefaultAddressFun() {
				const {
					data,
					code
				} = await getDefaultAddress({});
				if (code == 1) {
					this.myAddress = data;
					this.addressId = this.myAddress.id;
					if (data) {
						this.myAddress.address_all = data.province + data.district + data.city + data.address;
					}
				} else {
					this.myAddress = {};
				}
			},

			async getGoodsDetailFun() {
				const {
					data,
					code
				} = await getMyOrderGoodsDetail({
					item_id: this.itemId
				});
				if (code == 1) {
					if (data.count == 0) {
						this.$toast({
							title: "未获取商品信息"
						});
						setTimeout(() => {
							this.$Router.push('/bundle/pages/circulate/addgoods')
						}, 1500)
						return
					}
					this.goodsDetail = data.lists[0];
					this.refund_address = data.lists[0].shop.refund_address;
					this.refund_address_arr =[{
							head: this.refund_address.address.slice(0, 12),
							body: this.refund_address.address.slice(12, 100),
							open: false,
						}];
				} else {
					this.isNull = true
					this.isFirstLoading = false;
				}
			},
			confirmSelect(e) {
				this.reasonString = e[0].label
				this.reasonId = e[0].value
			},

			onlyRefund() {
				this.optTyle = refundOptType.ONLY_REFUND
				this.hiddenOpt = true
				this.confirmReason = this.refundReason
			},

			allRefunds() {
				this.optTyle = refundOptType.REFUNDS;
				this.hiddenOpt = true;
				this.confirmReason = this.reason;
			},
			onSuccess(e) {
				this.fileList.push(e.data.base_uri)
			},
			onRemove(index) {
				this.fileList.splice(index, 1)
			},
			async onSubmit() {
				if (!this.isAgreement) {
					return this.$toast({
						title: '请阅读并同意服务协议'
					});
				}

				const {
					service_type,
					itemId,
					// optTyle,
					myPayAccount,
					remark,
					fileList,
					addressId
				} = this;
				if (service_type == 1 && !addressId) {
					return this.$toast({
						title: '请选择您的地址'
					});
				}
				if (service_type == 2 && !myPayAccount.id) {
					return this.$toast({
						title: '请选择您的收款信息'
					});
				}
				const params = {
					service_type: service_type,
					item_id: itemId,
					goods_num: 1,
					user_pay_id: myPayAccount.id,
					user_pay_account: myPayAccount.account,
					user_address_id: addressId,
					remark: remark,
					images: fileList.length ? fileList[0] : ''
				};
				const {
					data,
					code,
					msg
				} = await postGoodsService(params)
				//跳转到主页
				// this.$toast({
				// 	title: msg
				// }, {
				// 	tab: 1,
				// 	url: '/pages/member/member'
				// });
				//转到详情页
				this.$toast({
					title: msg
				}, {
					tab: 2,
					url: 'bundle/pages/circulate/goods_service_detail?id=' + data.id
				});
			},

			getGoodsInfoFun() {
				let {
					orderId,
					itemId
				} = this;
				getGoodsInfo({
					order_id: orderId,
					item_id: itemId
				}).then(res => {
					if (res.code == 1) {
						this.goods = res.data.goods;
						this.reason = res.data.reason.map((item, index) => ({
							name: item.value,
							index: item.key
						}));
						this.refundReason = res.data.refund_reason.map((item, index) => ({
							name: item.value,
							index: item.key
						}));
					}
				});
			}

		}
	};
</script>
<style lang="scss">
	.label {
		// font-size: larger;
		width: 160rpx;
		font-weight: bold;
	}

	.color-muted {
		color: $-color-muted;
	}

	.xxs {
		color: $-color-muted;
	}

	.fixed-bottom-button {
		background-color: white;
		border-radius: 30rpx;
		// width: 640rpx;
		margin-left: 20rpx;
		// position: fixed;
		// bottom: 30rpx;
	}

	.container {
		padding-bottom: 50rpx;
		.goods_img {
			// background-color: $-color-body-grey-bg;
		}

		.goods {
			padding: 20rpx 24rpx;

			.goods-info {
				// margin-left: 24rpx;
				flex: 1;
			}
		}

		.refund-info {
			padding: 30rpx 20rpx;
			border-bottom: $-solid-border;

			.label_content {
				width: 550rpx;
				display: flex;
				justify-content: space-between;
				// margin-left: 50rpx;
			}

			.flex {
				// padding-left: 20rpx
			}

			textarea {
				flex: 1;
				height: 172rpx;
				border-radius: 10rpx;
				padding: 20rpx;
				box-sizing: border-box;
			}
		}

		.upload {
			padding-left: 20rpx;
			padding-top: 10rpx;

			.title {
				padding: 24rpx 0;
			}
		}

		.btn {
			margin: 30rpx 26rpx
		}
	}
</style>